<template>
  <div class="ContactView">
    <header-logo />
    <contact-title />
    <div class="contact-main d-flex py-2">
      <v-row align="center" justify="center">
        <v-col cols="12" md="6">
          <v-img
            src="http://placekitten.com/500/300"
            class="grey lighten-2"
            max-width="500"
            max-height="300"
          />
        </v-col>
        <v-col cols="12" md="6">
          <v-row v-for="contactInfo in contactInfos" :key="contactInfo.label">
            <v-col cols="12" md="6">
              <h1 style="font-size: 3rem;">{{ contactInfo.label }}</h1>
            </v-col>
            <v-col cols="12" md="6">
              <h1 style="font-size: 3rem;">{{ contactInfo.value }}</h1>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </div>
    <change-site />
    <my-footer />
  </div>
</template>

<script>
import HeaderLogo from '../components/HeaderLogo.vue'
import MyFooter from '@/components/MyFooter'
import ChangeSite from '@/components/ChangeSite'
import ContactTitle from '@/components/ContactTitle'
export default {
  name: 'ContactView',
  components: {
    HeaderLogo,
    MyFooter,
    ChangeSite,
    ContactTitle
  },
  data () {
    return {
      contactInfos: [
        {
          label: '当前考生',
          value: '张三'
        },
        {
          label: '考试时间',
          value: '60:00'
        },
        {
          label: '后续考生',
          value: '李四'
        }
      ]
    }
  },
  created () {
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
.ContactView {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .contact-main {
    flex: 1;
    width: 80%;
  }
}
</style>
